<template>
  <section class="page-container">
    <section class="page-container__Top">
      <section class="page-container__Top__item animate__animated  animate__fadeInLeft">
        <section class="page-container__Top__title">
          <img src="https://oss.qiacaiba.com/screen/screen/card03_tag02.png">
        </section>
        <section class="page-container__Top__content">
          <section class="page-containerLeft">
            <section class="imgContent">
              <img
                src="https://oss.qiacaiba.com/screen/screen/detail02_content01.png"
                alt=""
              >
            </section>
            <section class="imgContent">
              <img
                src="https://oss.qiacaiba.com/screen/screen/detail02_content02.png"
                alt=""
              >
            </section>
          </section>
          <section class="page-containerRight">
            <section class="txt">
              为黄鳝养殖户及相关企业提供大额信用贷款，仅需凭信息化交易平台数据即可最高贷款300万元2272笔 10.4亿元
            </section>
            <section class="content">
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="2000"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                笔
              </section>
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="10"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                亿元
              </section>
            </section>
            <section class="content">
              <section class="txt">
                贷款笔数
              </section>
              <section class="txt">
                贷款金额超
              </section>
            </section>
            <section class="txt color">
              养殖保险
            </section>
            <section class="content">
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="19"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                万口
              </section>
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="1000"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                万元
              </section>
            </section>
            <section class="content">
              <section class="txt">
                承包网箱
              </section>
              <section class="txt">
                承包网箱
              </section>
            </section>
            <section class="txt color">
              收入保险
            </section>
            <section class="content">
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="37.73"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                万口
              </section>
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="2000"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                万元
              </section>
            </section>
            <section class="content">
              <section class="txt">
                承包网箱
              </section>
              <section class="txt">
                承包网箱
              </section>
            </section>
          </section>
        </section>
      </section>
      <section class="page-container__Top__item animate__animated  animate__fadeInRight">
        <section class="page-container__Top__title">
          <img src="https://oss.qiacaiba.com/screen/screen/card03_tag03.png">
        </section>
        <section class="page-container__Top__content">
          <section class="page-containerLeft">
            <section class="imgContent">
              <img
                src="https://oss.qiacaiba.com/screen/screen/detail02_content03.png"
                alt=""
              >
            </section>
            <section class="imgContent">
              <img
                src="https://oss.qiacaiba.com/screen/screen/detail02_content04.png"
                alt=""
              >
            </section>
          </section>
          <section class="page-containerRight">
            <section class="txt color">
              专家问诊
            </section>
            <section class="txt color">
              <BaseCountTo
                :start-val="0"
                :end-val="9"
                :duration="3000"
                prefix=""
                suffix=""
                decimal=""
                separator=""
              />
              人
            </section>
            <section class="txt">
              常驻专家教授
            </section>
            <section class="txt color">
              <BaseCountTo
                :start-val="0"
                :end-val="300"
                :duration="3000"
                prefix=""
                suffix=""
                decimal=""
                separator=""
              />
              个
            </section>
            <section class="txt">
              解决养殖户问题超
            </section>
            <section class="txt color">
              技能培训
            </section>
            <section class="txt">
              黄鳝养殖技术培训
            </section>
            <section class="content">
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="10"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                场
              </section>
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="1200"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                人次
              </section>
            </section>
            <section class="txt">
              绿色养殖讲座
            </section>
            <section class="content">
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="4"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                场
              </section>
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="300"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                人次
              </section>
            </section>
            <section class="txt">
              电子商务培训
            </section>
            <section class="content">
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="5"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                场
              </section>
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="180"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                人次
              </section>
            </section>
            <section class="txt">
              劳务技能培训
            </section>
            <section class="content">
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="8"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                场
              </section>
              <section class="txt color">
                <BaseCountTo
                  :start-val="0"
                  :end-val="480"
                  :duration="3000"
                  prefix=""
                  suffix=""
                  decimal=""
                  separator=""
                />
                人次
              </section>
            </section>
          </section>
        </section>
      </section>
      <section class="page-container__Top__item animate__animated  animate__fadeInRight">
        <section class="page-container__Top__title" />
        <section
          class="page-container__Top__content"
          style="margin-top: 70px"
        >
          <el-carousel
            :interval="5000"
            arrow="never"
            indicator-position="none"
            height="420px"
            style="width: 100%"
          >
            <el-carousel-item
              class="swiperItem"
            >
              <img src="https://oss.qiacaiba.com/screen/screen/detail02_content05.png">
              <img src="https://oss.qiacaiba.com/screen/screen/detail02_content06.png">
            </el-carousel-item>
            <el-carousel-item
              class="swiperItem"
            >
              <img src="https://oss.qiacaiba.com/screen/screen/detail02_content07.png">
              <img src="https://oss.qiacaiba.com/screen/screen/detail02_content08.png">
            </el-carousel-item>
          </el-carousel>
        </section>
      </section>
    </section>
    <section class="page-container__Bottom animate__animated  animate__fadeInLeft">
      <img
        src="https://oss.qiacaiba.com/screen/screen/fuwu_bottom.png"
        alt=""
      >
    </section>
    <section
      class="back"
      @click="goBack"
    >
      <img
        src="https://oss.qiacaiba.com/screen/screen/back.png"
        alt=""
      >
    </section>
    <!-- 技术支持   -->
    <section class="copyRight">
      <img
        src="https://oss.qiacaiba.com/screen/screen/copyright_txt.png"
        alt=""
      >
    </section>
    <!--  logo  -->
    <section class="logo">
      <img
        src="https://oss.qiacaiba.com/screen/screen/logo01.png"
        alt=""
      >
    </section>
  </section>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { CountTo as BaseCountTo } from 'vue3-count-to';
const router = useRouter();
const goBack = () => {
  router.go(-1);
};
</script>
<style scoped lang="scss">
.logo{
  position: fixed;
  top: 80px;
  left: 50px;
  width: 68px;
  height: 88px;

  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.copyRight {
  position: fixed;
  bottom: 30px;
  right: 130px;
  width: 255px;
  height: 16px;

  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.page-container {
  padding: 0px 80px 0;

  .back {
    width: 116px;
    height: 54px;
    position: fixed;
    right: 40px;
    top: 80px;
    cursor: pointer;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .page-container__Top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;

    .page-container__Top__item {
      width: 500px;

      .page-container__Top__title {

        display: flex;
        justify-content: center;
        img {
          display: block;
          width: 231px;
          height: 56px;
        }
      }

      .page-container__Top__content {
        margin-top: 20px;
        height: 460px;
        background-image: url("https://oss.qiacaiba.com/screen/screen/centerDetailBg.png");
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
        padding: 30px 28px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .swiperItem {
          height: 100%;

          img {
            display: block;
            width: 100%;
            height: 200px;
            margin-top: 20px;
            object-fit: cover;
            transition: all .5s ease-in-out;
            &:hover{
              transform: scale(1.1);
            }
            &:first-child {
              margin-top: 0;
            }
          }
        }

        &.flexBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .page-containerLeft {
          .imgContent {
            width: 200px;
            height: 180px;
            margin-top: 20px;

            &:first-child {
              margin-top: 0;
            }

            img {
              width: 100%;
              height: 100%;
              transition: all .5s ease-in-out;
              &:hover{
                transform: scale(1.1);
              }
            }
          }
        }

        .page-containerRight {
          width: 225px;

          .txt {
            font-family: Source Han Sans;
            font-weight: 700;
            font-size: 22px;
            font-variation-settings: "opsz" auto;
            line-height: 30px;
            color: #B7E2FF;

            &.color {
              color: #08FBFF;
            }
          }

          .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }

  .page-container__Bottom {

    margin-top: 30px;
    width: 100%;
    .img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
